<!-- z-paging聊天输入框 -->

<template>
	<view class="chat-input-bar-container tn-w-full">
		<view class="chat-input-bar">
			<view class="chat-input-container">
				<!-- :adjust-position="false"必须设置，防止键盘弹窗自动上顶，交由z-paging内部处理 -->
				<TnInput ref="inputRef" :focus="focus" class="chat-input" v-model="msg" placeholder="请输入内容"
					 confirm-type="send" type="text" @confirm="sendClick" />
			</view>
			<!-- 表情图标（如果不需要切换表情面板则不用写） -->
			<view class="emoji-container">
				<TnIcon name="align" color="#333333" size="44" @click="chatClick" />
			</view>
			<view class="chat-input-send" @click="sendClick">
				<text class="chat-input-send-text">发送</text>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import TnInput from '@tuniao/tnui-vue3-uniapp/components/input/src/input.vue'

const emit = defineEmits(['send', 'chatClick'])

const msg = ref('')
const focus = ref(false)

const chatClick = () => {
	emit('chatClick');
}

const sendClick = () => {
	if (!msg.value.length) return;
	emit('send', msg.value);
	msg.value = '';
	focus.value = false
}

const onFocus = () => {
	focus.value = true
}

defineExpose({
	onFocus
})
</script>

<style scoped>
.chat-input-bar {
	display: flex;
	flex-direction: row;
	align-items: center;
	border-top: solid 1px #f5f5f5;
	background-color: #f8f8f8;

	padding: 10rpx 20rpx;
}

.chat-input-container {
	flex: 1;
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	padding: 15rpx;
	background-color: white;
	border-radius: 10rpx;
}

.chat-input {
	flex: 1;
	font-size: 28rpx;
}

.emoji-container {
	width: 54rpx;
	height: 54rpx;
	margin: 10rpx 0rpx 10rpx 20rpx;
}

.emoji-img {
	width: 54rpx;
	height: 54rpx;
}

.chat-input-send {
	background-color: #007AFF;
	margin: 10rpx 10rpx 10rpx 20rpx;
	border-radius: 10rpx;
	width: 110rpx;
	height: 60rpx;
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	justify-content: center;
	align-items: center;
}

.chat-input-send-text {
	color: white;
	font-size: 26rpx;
}

.emoji-panel-container {
	background-color: #f8f8f8;
	overflow: hidden;
	transition-property: height;
	transition-duration: 0.15s;
	/* #ifndef APP-NVUE */
	will-change: height;
	/* #endif */
}

.emoji-panel {
	font-size: 30rpx;
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: row;
	flex-wrap: wrap;
	padding-right: 10rpx;
	padding-left: 15rpx;
	padding-bottom: 10rpx;
}

.emoji-panel-text {
	font-size: 50rpx;
	margin-left: 15rpx;
	margin-top: 20rpx;
}
</style>